<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input placeholder="诗词标题" v-model="searchPoetryName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ByPoetryName">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addPoetryVisible=true">添加古诗词</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input placeholder="诗人" v-model="searchPoetryPote"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ByDynasty">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <ul class="poetryDynastys">
      <li class="poetryDynastyList">
        <el-button type="info" size="mini" plain @click="$store.dispatch('getPoetryList')">全部</el-button>
      </li>
      <li class="poetryDynastyList" v-for="row in allpoetryDynasty" :key="row.id">
        <el-button
          type="info"
          size="mini"
          plain
          @click="$store.dispatch('getPoetryListByDynasty',{searchName:row.poetryDynasty})"
        >{{row.poetryDynasty}}</el-button>
      </li>
    </ul>
    <ul class="poetryList">
      <li class="poetryList_li" v-for="ptl in $store.state.admin.poetryList" :key="ptl.poetryTitle">
        <h1 class="poetryTitle">{{ptl.poetryTitle}}</h1>
        <span class="poetryDynasty">{{ptl.poetryDynasty}}</span> ·
        <span class="poetryPote">{{ptl.poetryPote}}</span>
        <div v-for="(cnt,index) in ptl.poetryContnent" :key="index+'poetry'">
          <p class="poetryContnent">{{cnt}}</p>
        </div>
        <div>
          <el-button
            type="warning"
            size="mini"
            plain
            @click="poetryInfo=ptl;addPoetryVisible=true"
          >修改</el-button>
          <el-button type="danger" size="mini" plain @click="deletePoetry(ptl._id)">删除</el-button>
        </div>
      </li>
    </ul>
    <addPoetry
      v-if="addPoetryVisible"
      :poetryInfo="poetryInfo"
      :addPoetryVisible.sync="addPoetryVisible"
    ></addPoetry>
    <div class="PageInfo_userPoetry">
      <PageInfo action-name="getPoetryList" :searchName.sync="searchPoetryPote"></PageInfo>
    </div>
  </div>
</template>

<script>
import addPoetry from "@/components/adminCp/addPoetry";
export default {
  name: "adminPoetry",
  components: {
    addPoetry
  },
  data() {
    return {
      poetryInfo: {},
      searchPoetryName: "",
      searchPoetryPote: "",
      addPoetryVisible: false,
      allpoetryDynasty: [
        { id: 8, poetryDynasty: "先秦" },
        { id: 9, poetryDynasty: "魏晋" },
        { id: 10, poetryDynasty: "汉" },
        { id: 1, poetryDynasty: "南北朝" },
        { id: 3, poetryDynasty: "唐" },
        { id: 4, poetryDynasty: "宋" },
        { id: 5, poetryDynasty: "元" },
        { id: 6, poetryDynasty: "明" },
        { id: 7, poetryDynasty: "清" }
      ]
    };
  },
  methods: {
    //删除诗词
    deletePoetry(_id) {
      this.$store.dispatch("deletePoetry", _id).then(res => {
        if (res.ok === 1) {
          this.$store.dispatch("getPoetryList", {
            poetryTitle: this.searchPoetryName,
            pageIndex: this.$store.state.pageIndex
          });
          this.$message({
            message: res.msg,
            type: "success"
          });
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error"
          });
        }
      });
    },
    //根据诗人查询古诗词
    ByDynasty() {
      this.searchPoetryName = "";
      this.$store.dispatch("getPoetryListByPoetryPote", {
        searchName: this.searchPoetryPote
      });
    },
    //根据诗词名查询古诗词
    ByPoetryName() {
      this.searchPoetryPote = "";
      this.$store.dispatch("getPoetryList", {
        searchName: this.searchPoetryName
      });
    }
  }
};
</script>
<style scoped lang="scss">
.poetryDynastys {
  line-height: 2rem;
  .poetryDynastyList {
    float: left;
    margin-left: 1rem;
  }
}

.poetryList {
  clear: both;
  .poetryList_li {
    margin: 2rem 0 0 2rem;
    float: left;
    list-style: none;
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.5rem;
    .poetryTitle {
      font-style: normal;
    }
    .poetryDynasty {
      font-size: 0.7rem;
    }
    .poetryPote {
      font-size: 0.8rem;
    }
  }
}
.PageInfo_userPoetry {
  clear: both;
}
</style>